<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>登录</title>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script src="webjars/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<div layout:fragment="content" th:remove="tag">
    <header>
        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container">

                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a th:href="@{/}">Cola-Auth</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div th:if="${session.authentication_fail_message}">
                <div class="alert alert-danger">
                    <span th:text="${session.authentication_fail_message}"></span>
                </div>
            </div>
            <div th:if="${param.logout}">
                <div class="alert alert-info">
                    已退出登录
                </div>
            </div>
            <div th:if="${param.session}">
                <div class="alert alert-danger">
                    会话已过期，请重新登录
                </div>
            </div>
            <div class="col-md-12" id="loginPanel">
                <form class="form-horizontal" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="username">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" id="username" class="form-control" name="username" placeholder="用户名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" id="password" class="form-control" name="password" placeholder="密码"/>
                        </div>
                    </div>
                    <div class="form-group" th:if="${session.captcha_authentication_required}">
                        <label class="col-sm-2 control-label" for="username">验证码</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="text" class="form-control" name="captcha" placeholder="输入验证码">
                                <span class="input-group-btn">
                                <img id="imageVerificationCode" onclick="this.src=this.src"
                                     style="height: 34px;cursor: pointer" src="/captcha">
                             </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> 记住我
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="col-sm-12 ">
                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                            <input type="submit"
                                   name="login-submit"
                                   id="login-submit"
                                   class="form-control btn btn-primary"
                                   value="登录">
                        </div>
                    </div>
                </form>
            </div>


            <div class="col-sm-12 text-center">
                <button class="btn btn-default" id="loginBySmsBtn">
                    <a href="/loginBySms">短信登录</a>
                </button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
